<template>
  <el-dialog
    :model-value="props.show"
    :close-on-click-modal="false"
    title="选择查询参数"
    width="450"
    center
    :before-close="handleCancel"
  >
    <el-form
      ref="adRef"
      :model="params"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="类型" prop="type">
        <el-select
          v-model="params.type"
          clearable
          class="mySelect3 m-2"
          placeholder="请选择考试批次"
        >
          <el-option
            v-for="item in typeList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="标题" prop="title">
        <el-input class="myInput" v-model="params.title" />
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input class="myInput" v-model="params.content" />
      </el-form-item>

      <el-form-item label="跳转链接地址" prop="link">
        <el-input class="myInput" v-model="params.link" />
      </el-form-item>

      <el-form-item label="广告发布位置" prop="loc">
        <el-input class="myInput" v-model="params.loc" />
      </el-form-item>

      <el-form-item label="状态" prop="state">
        <el-select
          v-model="params.state"
          clearable
          class="mySelect3 m-2"
          placeholder="请选择状态"
        >
          <el-option label="发布" :value="0" />
          <el-option label="不发布" :value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label="排序" prop="order">
        <el-input class="myInput" v-model="params.order" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  adType: {
    type: String,
    default: '',
  },
  adData: {
    type: Object,
    default: {},
  },
});

const emits = defineEmits(['closeDia', 'handleSubmit']);
const params = reactive({
  id: '',
  type: 1,
  title: '',
  content: '',
  link: '',
  loc: '',
  state: 1,
  order: 1,
});
const adRef = ref();

// 类型列表
const typeList = ref([
  {
    name: '通知',
    code: 1,
  },
  {
    name: '广告',
    code: 2,
  },
]);

//form校验规则
const rules = reactive({
  title: [{ required: true, message: '请输入', trigger: 'blur' }],
  content: [{ required: true, message: '请输入', trigger: 'blur' }],
  loc: [
    {
      required: params.type == 2 ? true : false,
      message: '请输入',
      trigger: 'blur',
    },
  ],
  type: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  state: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  order: [
    {
      required: true,
      message: '请输入',
      trigger: 'blur',
    },
  ],
});

const handleCancel = () => {
  emits('closeDia');
  resetParams();
};

const handleConfirm = async () => {
  await adRef.value.validate((valid) => {
    if (valid) {
      emits('handleSubmit', { ...params });
    }
  });

  handleCancel();
};

//还原params
const resetParams = () => {
  for (const key in params) {
    params[key] = '';
  }
  params.type = 1;
  params.state = 1;
  params.order = 1;
};

onMounted(() => {
  if (props.show && props.adType == 'edit') {
    for (const key in params) {
      params[key] = props.adData[key];
    }
  }
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/mycss.css';
</style>
